<template>
    <div style="width:100%;height:100%;overflow:hidden">
        <div id="map"></div>
    </div>
</template>
<script>
import mapboxgl from 'mapbox-gl'
export default {
    data () {
        return {
         map:null
        }
    },
    mounted(){
      this.init()
    },
    methods: {
        init(){
            // this.smartmapx.mapbase = 'http://www.smartmapx.com';
            // this.smartmapx.apikey = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJuYmYiOjE1MzcxODM1OTgsImRhdGEiOiJ7XCJsb2dpbl9uYW1lXCI6XCJyb290XCIsXCJnZW5kZXJcIjoyLFwidXNlcl9pZFwiOlwiZm1fc3lzdGVtX3VzZXJfcm9vdFwiLFwidXNlcl9uYW1lXCI6XCJyb290XCIsXCJ1c2VyX29yaWdpbl9pZFwiOlwiZm1fbG9jYWxcIixcInByb2R1Y3RfaWRcIjpcIlwiLFwiZXhwaXJlX3RpbWVcIjpcIlwiLFwic291cmNlX2lkXCI6XCJcIixcInR5cGVcIjpcIlwiLFwiY29ycF9pZFwiOlwiZm1fc3lzdGVtX2NvcnBcIn0iLCJleHAiOjQwOTI1OTkzNDksImp0aSI6ImFfNjhmZjBhZGY5OTcxNDQ0NThjNzViZWFiN2FjNTkzYWYifQ.W122WkT6QR4HZWbpalkpmirV9JWkDYcCkmNZoxCB_z8';
            // this.map=new this.smartmapx.Map({
            //     container: 'map',
            //     mapId: 'map_id_23',
            //     center: [-87.61694, 41.86625],
            //     zoom: 15.99,
            //     pitch: 40,
            //     bearing: 20,
            //     antialias: true
            // });
            // this.map.addControl(new this.smartmapx.NavigationControl(),'top-right');
            // this.map.addControl(new this.smartmapx.ScaleControl({
            //     maxWidth: 100,
            //     unit: 'm'
            // }));
            	this.mapbgl.accessToken = 'pk.eyJ1IjoiMTgzODI0ZHl0IiwiYSI6ImNqbHExNDVjZzI0ZmUza2wxMDhocnlyem4ifQ.FZoJzmqTtli8hAvvAc1OPA';
                this.map = new this.mapbgl.Map({
                    container: 'map',
                    style: 'mapbox://styles/mapbox/streets-v11',
                    center: [-87.61694, 41.86625],
                    zoom: 15.99,
                    pitch: 40,
                    bearing: 20,
                    antialias: true
                });
            this.map.on('load',()=>{
              this.map.addLayer({
                'id': 'room-extrusion',
                'type': 'fill-extrusion',
                'source': {
                // GeoJSON Data source used in vector tiles, documented at
                // https://gist.github.com/ryanbaumann/a7d970386ce59d11c16278b90dde094d
                'type': 'geojson',
                'data':'https://docs.mapbox.com/mapbox-gl-js/assets/indoor-3d-map.geojson'},
                'paint': {
                // See the Mapbox Style Specification for details on data expressions.
                // https://docs.mapbox.com/mapbox-gl-js/style-spec/#expressions
                
                // Get the fill-extrusion-color from the source 'color' property.
                'fill-extrusion-color': ['get', 'color'],
                
                // Get fill-extrusion-height from the source 'height' property.
                'fill-extrusion-height': ['get', 'height'],
                
                // Get fill-extrusion-base from the source 'base_height' property.
                'fill-extrusion-base': ['get', 'base_height'],
                
                // Make extrusions slightly opaque for see through indoor walls.
                'fill-extrusion-opacity': 0.5
                }
                });
            })
        }
    }
}
</script>
<style scoped>
@import url('https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.2/mapbox-gl.css');
#map{
    width:100%;
    height:100%
}
</style>